<template>
  <div class="application">
    <div>
      <NavBar :title="title" :route="route"></NavBar>
    </div>
    <div>
      <div>
        <div class="Information" >
          <div class="nav1" @click="RegistrationDetails">
            <van-cell is-link class="updatePwd">金榜登科第三中学</van-cell>
          </div>
          <div class="xian"></div>
          <div @click="details" class="details">
            <p>考&#12288;&#12288;试&#12288;<span>廊坊市广阳区考点</span></p>
            <p>考&#12288;&#12288;点&#12288;<span>河北省-廊坊市-广阳区</span></p>
            <p>考试专业&#12288;<span>音乐</span></p>
            <p>考试时间&#12288;<span>3月1日-3月6日</span></p>
          </div>
      
          <div class="SignUp">
            <p>报名费用：<span>￥200</span></p>
            <span class="SignUpRight">
          <van-button type="info" @click="CollegeMajors" class="goPay">去支付</van-button>
        </span>
          </div>
          <div class="Unpaid">
            未支付，报考未成功，请尽快支付
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
    import NavBar from '@/components/navBar.vue'

    export default {
        data() {
            return {
                // 标题  路由
                title: '我的报考记录',
                route: '/MyHome',
            }
        },
        methods: {
            RegistrationDetails() {
                this.$router.push({path: 'RegistrationDetails'})
            },
            CollegeMajors() {
                this.$router.push({path: '/CollegeMajor'})
            },
            // 点击内容区
            details(){
                this.$router.push({path: '/RegistrationDetails'})
            }
        },
        components: {
            NavBar,
        },
    }
</script>

<style scoped>
  .application {
    height: 100%;
    background-color: #f0f0f0;
  }
  .school {
    height: 36px;
  }
  .school img {
    height: 30px;
    width: 30px;
    margin-left: 15px;
  }
  .school span {
    color: rgba(80, 80, 80, 1);
    font-size: 14px;
    line-height: 44px;
    text-align: left;
    position: relative;
    top: -8px;
  }

  .Information {
    margin: 10px 15px 0;
    background-color: #FFFFFF;
  }

  .Information p {
    margin-left: 16px;
    font-size: 14px;
  }

  .Information p span {

    font-size: 14px;
    line-height: 150%;
    text-align: left;
    font-weight: bold;
  }

  .xian {
    height: 1px;
    color: rgba(80, 80, 80, 1);
    background-color: rgba(229, 229, 229, 1);
  }

  .updatePwd::before {
    content: '';
    display: block;
    width: 20px;
    height: 20px;
    background: url('../../assets/logea.png');
    background-size: contain;
    margin-right: 5px;
  }


  .SignUp p {
    color: rgba(255, 0, 0, 1);
  }

  .SignUpRight {
    /*margin-left: 250px;*/
    display: flex;
    justify-content: flex-end;
    margin: 0 20px 10px 0;
  }

  .Unpaid {
    text-align: right;
    color: rgba(255, 141, 26, 1);
    font-size: 12px;
    margin-right: 20px;
    padding-bottom: 20px;
  }

  .goPay{
    width: 70px;
    height: 30px;
    font-size: 12px;
    border-radius: 6px;
  }
  .details p{
    margin-bottom: -5px;
  }
</style>
